<template>
    <view class="boxs">
        <div class="timu">1.在无为市11家金融机构中，哪家银行社保卡服务网点最多、发卡量最大且在每个乡镇均有网点？</div>
        <div class="shuben">
            <image class="shu" mode="widthFix" src="/static/shu.webp" />
            <div class="tiku">
                <div class="lines">
                    <div class="question">
                        A
                    </div>
                    <div class="answer">中国邮政储蓄银行</div>
                </div>
                <div class="lines">
                    <div class="question">
                        B
                    </div>
                    <div class="answer">中国农业银行</div>
                </div>
                <div class="lines">
                    <div class="question">
                        C
                    </div>
                    <div class="answer">中国农业银行</div>
                </div>
                <div class="lines">
                    <div class="question">
                        D
                    </div>
                    <div class="answer">中国农业银行</div>
                </div>

                <div class="result">
                    <!-- 我的答案 答对了就是lvse 答错了errors -->
                    我的答案:<text :class="true ? 'errors' : 'lvse'">A</text>正确答案: <text class="lvse">B</text>
                </div>

                <div class="jiexi">
                    <text style="color: red"> 解析：</text>
                    参保人员需携带身份证、户口本复印件到户籍所在村（社区）填写《安徽省城乡居民养老保险参保登记表》，再通过微信、支付宝、皖事通等方式线上缴费。
                </div>
            </div>
            <!-- 答当前这道题 无论是否答对 都要显示解析 而且显示 class="result" 如果打错了 我的答案是红色 -->
            <div class="btns">确定</div>
            <!-- 展示完解析之后就显示下一题  如果是最后一题就显示完成 -->
            <div class="btns">下一题</div>
        </div>
    </view>
</template>
<script>
export default {
    data() {
        return {
        }
    },
    created() {
    },
    methods: {
    }
}
</script>
<style>
.btns {
    width: 70%;
    height: 90rpx;
    line-height: 90rpx;
    background: linear-gradient(to top, rgb(24, 116, 255), rgb(88, 155, 255));
    border-radius: 20rpx;
    color: white;
    text-align: center;
    margin: 0 auto;
}

.jiexi {
    margin-top: 15px;
    font-size: 26rpx;
}

.lvse {
    color: rgb(0, 216, 0);
}

.result text {
    margin-right: 30rpx;
    margin-left: 10rpx;
}

.errors {
    color: red;
}

.question {
    width: 40rpx;
    height: 40rpx;
    text-align: center;
    line-height: 40rpx;
    font-size: 25upx;
    font-weight: bold;
    color: white;
    border-radius: 50%;
    background: linear-gradient(to left, rgb(24, 116, 255), rgb(88, 155, 255));
}

.answer {
    width: 450rpx;
    margin-left: 20rpx;
    font-size: 30rpx;
    line-height: 45rpx;
}

.tiku {
    position: absolute;
    width: 100%;
    height: 100%;
    padding: 100rpx 150rpx;
    padding-top: 150rpx;
    padding-left: 170rpx;
    box-sizing: border-box;
    top: 0;
}

.lines {
    display: flex;
    justify-items: left;
    margin-bottom: 30rpx;
    justify-content: left;
}

.shu {
    width: 100%;
}

.shuben {
    width: 100%;
    display: block;
    position: relative;
}

.timu {
    background: rgba(255, 255, 255, 0.6);
    width: 80%;
    padding: 20rpx;
    border-radius: 10rpx;
    margin: 0 auto;
    font-size: 35rpx;
    font-weight: bold;
    color: #333;
}

.boxs {
    padding-top: 200rpx;
    background: url("/static/bg2.webp");
    background-size: cover;
    background-position: center;
    width: 100%;
    min-height: 100vh;
    padding-bottom: 50rpx;
    box-sizing: border-box;

}
</style>